<template>
  <vab-card
    :class="editableTabs.length >0 && editableTabs.length > 1 || 0 ? 'div_bank2' : 'div_bank1'"
    shadow="never"
  >
    <el-tabs
      type="border-card"
      v-model="editableTabsValue"
      :closable="editableTabs.length > 1 && route.query.type != 4"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="(items,i) in editableTabs"
        :key="items.name"
        :label="items.title"
        :name="items.name"
        style="padding: 20px"
      >
        <template #label>
          {{ items.title }}
          <div  v-if="route.query.type != 4">
            <vab-icon
              icon="file-copy-2-line"
              title="复制"
              style="margin-right: 4px; margin-left: 8px"
              @click="addTab(editableTabsValue)"
            />
            <vab-icon icon="add-box-line" title="添加" @click="addTab(0)" />
          </div>
        </template>

        <el-form :model="base_formData[i]" :disabled = 'route.query.type == 4'>
        <el-row :gutter="24">
          <el-col
            v-for="(item, index) in items.content"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
          >
<!--            <el-form-item
              :label="item.label"
              :prop="item.value"
              :rules="rules(item.value)"
            >-->
              <el-form-item
                :label="item.label"
                :prop="item.value"
              >
                <el-tooltip
                  v-if="route.query.type == 4 &&  item.value =='invoice_bank_name' && item.item != ' '|| route.query.type == 4 &&  item.value =='invoice_address' && item.item != ' '"
                  placement="top"
                  :content="item.item || '--'"
                >
              <el-input
                v-model.trim="item.item"
                @change="listValue(item.value, $event,items.name)"
              />
                </el-tooltip>
                <el-input
                  v-else
                  v-model.trim="item.item"
                  @change="listValue(item.value, $event,items.name)"
                />
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </vab-card>
</template>
<script lang="ts" setup>
  import customerStore from "/@/views/customerIndex/storeList";

  defineOptions({
    name: 'AddInvoiceMode',
  })
  import { ref } from 'vue'
  const props = defineProps(['base_formDatas'])
  const $emits = defineEmits(['update:base_formDatas'])
  const route:any = useRoute() //route.query.id
  const base_formData:any = reactive<any>(props.base_formDatas || [])
  const editableTabsValue = ref(base_formData && base_formData[0]?.id || 1)
  let editableTabs = ref<any>(
    base_formData?.map((item: any, index: any) => {
      return {
        title: `发票信息 ${index == 0 ? '' : index}`,
        name:  item.id,
        content: [
          {
            label: '发票抬头',
            value: 'invoice_title',
            item: item.invoice_title,
          },
          {
            label: '纳税登记号',
            value: 'tax_register_code',
            item: item.tax_register_code,
          },
          {
            label: '开户银行',
            value: 'invoice_bank_name',
            item: item.invoice_bank_name,
          },
          {
            label: '银行账号',
            value: 'invoice_bank_account',
            item: item.invoice_bank_account,
          },
          {
            label: '开票联系电话',
            value: 'invoice_tel',
            item: item.invoice_tel,
          },
          {
            label: '开票通讯地址',
            value: 'invoice_address',
            item: item.invoice_address,
          },
          {
            label: '统一社会信用代码',
            value: 'socialcre_code',
            item: item.socialcre_code,
          },
        ],
      }
    })
  )
  let tabIndex = props.base_formDatas && props.base_formDatas.length || 1
  const addTab = (targetName: number) => {
    if (targetName == 0) {
      const newTabName: any = `${++tabIndex}`
      editableTabs.value.push({
        title: `发票信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          { label: '发票抬头', value: 'invoice_title', item: '' },
          { label: '纳税登记号', value: 'tax_register_code', item: '' },
          { label: '开户银行', value: 'invoice_bank_name', item: '' },
          { label: '银行账号', value: 'invoice_bank_account', item: '' },
          { label: '开票联系电话', value: 'invoice_tel', item: '' },
          { label: '开票通讯地址', value: 'invoice_address', item: '' },
          { label: '统一社会信用代码', value: 'socialcre_code', item: '' },
        ],
      })
      editableTabsValue.value = newTabName
      props.base_formDatas.push(
        {
          invoice_title: '',
          tax_register_code: '',
          invoice_bank_name: '',
          invoice_bank_account: '',
          invoice_tel: '',
          invoice_address: '',
          socialcre_code: '',
          id: String(new Date().getTime()).slice(-6),
        })
    } else {
      const assignment = editableTabs.value.filter(
        (tab: any) => tab.name == targetName
      )[0]
      const newTabName: any = `${++tabIndex}`
      editableTabs.value.push({
        title: `发票信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          {
            label: '发票抬头',
            value: 'invoice_title',
            item: assignment.content[0].item,
          },
          {
            label: '纳税登记号',
            value: 'tax_register_code',
            item: assignment.content[1].item,
          },
          {
            label: '开户银行',
            value: 'invoice_bank_name',
            item: assignment.content[2].item,
          },
          {
            label: '银行账号',
            value: 'invoice_bank_account',
            item: assignment.content[3].item,
          },
          {
            label: '开票联系电话',
            value: 'invoice_tel',
            item: assignment.content[4].item,
          },
          {
            label: '开票通讯地址',
            value: 'invoice_address',
            item: assignment.content[5].item,
          },
          {
            label: '统一社会信用代码',
            value: 'socialcre_code',
            item: assignment.content[6].item,
          },
        ],
      })
      editableTabsValue.value = newTabName
      props.base_formDatas.push(
        {
          invoice_title: assignment.content[0].item,
          tax_register_code: assignment.content[1].item,
          invoice_bank_name: assignment.content[2].item,
          invoice_bank_account: assignment.content[3].item,
          invoice_tel: assignment.content[4].item,
          invoice_address: assignment.content[5].item,
          socialcre_code: assignment.content[6].item,
          id: String(new Date().getTime()).slice(-6),
        })
    }
  }
  const removeTab = (targetName: string, ab: any) => {
    const tabs = editableTabs.value
    let activeName: any = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab: any, index: any) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = editableTabs.value.filter(
      (tab: any) => tab.name !== targetName
    )
    const index = props.base_formDatas.findIndex((item:any) => item.id === targetName);
    if (index !== -1) {
      props.base_formDatas.splice(index,1)
    }
  }
  const listValue = (va: any, e: any,id_number:any) => {
    props.base_formDatas.map((item: any) => {
      if (item.id == id_number) {
        return (item[va] = e)
      } else {
        return {
          ...item,
        }
      }
    })
  }
  const rules = (va:any)=>{
    if(va== 'invoice_bank_account' ){
      return  [
        { pattern: /^\d{9,18}$/, message: '请输入正确的银行账号', trigger: 'blur' }
      ]
    }
    if(va== 'invoice_tel'){
      return  [
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ]
    }
    if(va == 'socialcre_code'){
      return  [
        { pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{15})$/, message: '请输入正确的统一信用代码', trigger: 'blur' }
      ]
    }
  }
  // 企业信息回填
  const pintStoreList = customerStore()
  // 企业信息回填
  watchEffect(()=>{
    const {businessInformationDate}:any = pintStoreList
    if(businessInformationDate){
      const arr1 = businessInformationDate.filter((i:any)=> i.field == 'socialCreditCode')
      editableTabs.value[0].content[6].item = arr1.length == 0 ? editableTabs.value[0].content[6].item :arr1[0].label
      props.base_formDatas[0].socialcre_code = arr1.length == 0 ?  props.base_formDatas[0].socialcre_code :arr1[0].label
    }
  })
</script>
<style lang="scss" scoped>
.div_bank1 {
  :deep() {
    .el-tabs__content{
      padding: 0;
    }
    .el-tab-pane{
      padding-bottom: 0px !important;
    }
    .el-tabs__nav {
      width: 100% !important;
    }
    .el-tabs__item {
      display: flex;
      justify-content: space-between;
      width: 100% !important;
      padding: 10px 20px !important;
      height: 45px;
    }
    .el-tabs__item:hover {
      color: #000;
    }
    .el-tabs__item.is-active {
      color: #000;
      &:hover{
        color:  #000;
      }
    }
    .el-tabs__active-bar {
      height: 0px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-card__body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
    }
    .el-tabs--border-card{
      border: 0px solid #fff !important;
    }
    .el-tabs__nav{
      border-bottom:1px solid #eee ;
    }
    .is-active{
      border-right: 0px solid #eee;
    }
  }
}
.div_bank2 {
  :deep() {
    .el-tabs__content{
      padding: 0;
    }
    .el-tab-pane{
      padding-bottom: 0px !important;
    }
    .el-tabs__item {
      padding: 10px 20px !important;
      height: 45px;
    }
    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      line-height: 61px;
    }
    /* .el-tabs__item:hover {
      color: #000;
    }
    .el-tabs__item.is-active {
      color: #000;
    }*/
    .el-tabs__active-bar {
      height: 0px;
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-card__body {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-top: 0 !important;
    }
    .el-tabs--border-card{
      border: 0px solid #fff !important;
    }
    .el-tabs__nav{
      border-bottom:1px solid #eee ;
    }
  }
}
</style>
